<template>
  <div class="">
    <heads></heads>
    <main>
      <div id="main" style="width: 100%; height: 600px"></div>
    </main>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import heads from "@/components/adminHead.vue";

import { selectProvince } from "@/api/getPostApi";

import * as echarts from "echarts";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    heads,
  },
  data() {
    //这里存放数据
    return {
      myChart: "",
      addList: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    initPops() {
      this.myChart.setOption({
        title: {
          text: "全国用户图标",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["北京", "安徽", "福建", "甘肃", "广东", "广西", "贵州", "海南", "河北", "河南", "黑龙江", "湖北", "湖南", "吉林", "江苏", "江西", "辽宁", "内蒙古", "宁夏", "青海", "山东", "山西", "陕西", "上海", "四川", "天津", "西藏", "新疆", "云南", "浙江", "重庆", "香港", "澳门", "台湾"],
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: this.addList[0].count, name: "北京" },
              { value: this.addList[1].count, name: "安徽" },
              { value: this.addList[2].count, name: "福建" },
              { value: this.addList[3].count, name: "甘肃" },
              { value: this.addList[4].count, name: "广东" },
              { value: this.addList[5].count, name: "广西" },
              { value: this.addList[6].count, name: "贵州" },
              { value: this.addList[7].count, name: "海南" },
              { value: this.addList[8].count, name: "河北" },
              { value: this.addList[9].count, name: "河南" },
              { value: this.addList[10].count, name: "黑龙江" },
              { value: this.addList[11].count, name: "湖北" },
              { value: this.addList[12].count, name: "湖南" },
              { value: this.addList[13].count, name: "吉林" },
              { value: this.addList[14].count, name: "江苏" },
              { value: this.addList[15].count, name: "江西" },
              { value: this.addList[16].count, name: "辽宁" },
              { value: this.addList[17].count, name: "内蒙古" },
              { value: this.addList[18].count, name: "宁夏" },
              { value: this.addList[19].count, name: "青海" },
              { value: this.addList[20].count, name: "山东" },
              { value: this.addList[21].count, name: "山西" },
              { value: this.addList[22].count, name: "陕西" },
              { value: this.addList[23].count, name: "上海" },
              { value: this.addList[24].count, name: "四川" },
              { value: this.addList[25].count, name: "天津" },
              { value: this.addList[26].count, name: "西藏" },
              { value: this.addList[27].count, name: "新疆" },
              { value: this.addList[28].count, name: "云南" },
              { value: this.addList[29].count, name: "浙江" },
              { value: this.addList[30].count, name: "重庆" },
              { value: this.addList[31].count, name: "香港" },
              { value: this.addList[32].count, name: "澳门" },
              { value: this.addList[33].count, name: "台湾" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
    dataSet() {
      console.log(this.addList);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    selectProvince().then((response) => {
      this.addList = response.data;
      this.myChart = echarts.init(document.getElementById("main"));
      this.initPops();
    });
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
</style>
